<template>
    <div class="manage-menu">
        <div style="height: 35px">
            <el-form :model="searchForm" :inline="true" size="mini">
                <el-form-item label="name">
                    <el-input v-model="searchForm.name"></el-input>
                </el-form-item>
                <el-form-item label="code">
                    <el-input v-model="searchForm.code"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="listMenu">Search</el-button>
                    <el-button type="primary" @click="listMenuTree">Refresh</el-button>
                    <el-button type="primary" @click="handleCreate({ukId: '0', type: 0})">New</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table
                @row-dblclick="handleRowDblClick"
                border
                default-expand-all
                highlight-current-row
                :data="menuTable"
                row-key="ukId"
                height="500"
                size="mini"
                style="width: 100%"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                    prop="name"
                    label="name"
                    width="*"
                    min-width="200">
            </el-table-column>
            <el-table-column
                    prop="code"
                    label="code"
                    width="150">
            </el-table-column>
            <el-table-column
                    show-overflow-tooltip
                    prop="routing"
                    label="routing"
                    width="260">
            </el-table-column>
            <el-table-column
                    show-overflow-tooltip
                    prop="page"
                    label="page"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="type"
                    width="70">
                <template slot-scope="scope">
                    <el-tag effect="light" type="" v-if="scope.row.type == '1'" size="mini">系统</el-tag>
                    <el-tag effect="light" type="success" v-if="scope.row.type == '2'" size="mini">目录</el-tag>
                    <el-tag effect="light" type="danger" v-if="scope.row.type == '3'" size="mini">菜单</el-tag>
                    <el-tag effect="light" type="warning" v-if="scope.row.type == '4'" size="mini">按钮</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="icon"
                    label="icon"
                    width="70">
                <template slot-scope="scope">
                    <i :class="scope.row.icon"></i>
                </template>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="status"
                    width="70">
                <template slot-scope="scope">
                    <el-switch
                            @change="statusChange($event, scope.row.ukId)"
                            :value="scope.row.status != '1'"
                            active-color="#909399"
                            inactive-color="#67c23a">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                    prop="sort"
                    label="sort"
                    width="60">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="235">
                <template slot-scope="scope">
                    <el-button
                            :disabled="scope.row.type == '4'"
                            size="mini"
                            @click="handleCreate(scope.row)">新建下级
                    </el-button>
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row.ukId)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="菜单管理" :visible.sync="showMenuForm" :close-on-click-modal="false" label-width="80px">
            <el-row>
                <el-col :span="12">
                    <el-form ref="form" :model="menuForm" label-width="80px">
                        <el-form-item label="菜单编码">
                            <el-input v-model="menuForm.code"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单名称">
                            <el-input v-model="menuForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="路由地址">
                            <el-input v-model="menuForm.routing"></el-input>
                        </el-form-item>
                        <el-form-item label="跳转地址">
                            <el-input v-model="menuForm.page"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单类型">
                            <el-select v-model="menuForm.type" placeholder="请选择类型">
                                <el-option v-if="menuForm.parentType === 0" label="系统" :value = 1></el-option>
                                <el-option v-if="menuForm.parentType === 1" label="目录" :value = 2></el-option>
                                <el-option v-if="menuForm.parentType === 1 || menuForm.parentType === 2" label="菜单" :value = 3></el-option>
                                <el-option v-if="menuForm.parentType !== 0" label="按钮" :value = 4></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="菜单图标">
                            <el-select v-model="menuForm.icon" placeholder="请选择图标">
                                <el-option value="el-icon-edit">
                                    <span style="float: left">el-icon-edit</span>
                                    <span style="float: right; color: #8492a6">
                                        <i class="el-icon-edit" style="font-size: 20px"></i>
                                    </span>
                                </el-option>
                                <el-option value="el-icon-share">
                                    <span style="float: left">el-icon-share</span>
                                    <span style="float: right; color: #8492a6">
                                        <i class="el-icon-share" style="font-size: 20px"></i>
                                    </span>
                                </el-option>
                                <el-option value="el-icon-delete">
                                    <span style="float: left">el-icon-delete</span>
                                    <span style="float: right; color: #8492a6">
                                        <i class="el-icon-delete" style="font-size: 20px"></i>
                                    </span>
                                </el-option>
                            </el-select>
                            <i :class="menuForm.icon" style="font-size: 20px"></i>
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-select v-model="menuForm.status" placeholder="请选择状态">
                                <el-option
                                        v-for="item in this.$store.state.Pabu.dict.manage.STATUS.dictItems"
                                        :key="item.ukId"
                                        :label="item.name"
                                        :value="parseInt(item.value)">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input v-model="menuForm.sort" type="number" min="0" max="90000"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleSave">保存</el-button>
                            <el-button @click="showMenuForm = false">取 消</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form ref="form" :model="menuForm" label-width="80px">
                        <el-form-item label="菜单权限">
                            <el-select v-model="menuForm.permissionIds" filterable multiple placeholder="请选择权限" style="width: 100%">
                                <el-option
                                        v-for="permission in this.permissionTable"
                                        :key="permission.ukId"
                                        :label="permission.name"
                                        :value="permission.ukId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
  import {deleteMenu, listMenu, listMenuTree, saveMenu, updateMenuStatus} from "../../../api/manage/menu";
  import {listPermission} from "../../../api/manage/permission";
  import PageUtils from "../../../utils/PageUtils";

  export default {
    name: "Menu",
    data () {
      return {
        showMenuForm: false,
        menuTable: [],
        permissionTable: [],
        searchForm: {},
        menuForm: {},
        pagination: {
          total: 0,
          size: 30,
          current: 1,
        }
      }
    },
    methods: {
      handleCreate (parent) {
        this.menuForm = {
          parentType: parent.type,
          parentId: parent.ukId,
          status: 1,
          permissionIds: []
        }
        this.listPermission()
        this.showMenuForm = true
      },
      handleEdit (row) {
        this.menuForm = row
        this.menuForm.parentType = row.type - 1
        this.listPermission()
        this.showMenuForm = true
      },
      handleSave () {
        saveMenu(this.menuForm).then(result => {
          this.listMenuTree()
          this.showMenuForm = false
        }).catch(error => {
          console.log(error)
        })
      },
      handleDelete (ukId) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteMenu(ukId).then(result => {
            this.listMenuTree()
            this.showMenuForm = false
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(error => {
            console.log(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      statusChange (value, menuId) {
        let status = value ? 0 : 1
        updateMenuStatus(menuId, status).then(result => {
          this.listMenuTree()
        }).catch(error => {
          console.log(error)
        })
      },
      handleRowDblClick (row) {

      },
      listMenuTree () {
        listMenuTree('0').then(result => {
          this.menuTable = result.data.menuTree
        }).catch(error => {
          console.log(error)
        })
      },
      listMenu () {
        listMenu(this.searchForm, 1, 300).then(result => {
          this.menuTable = result.data.menus.records
        }).catch(error => {
          console.log(error)
        })
      },
      listPermission () {
        listPermission(this.searchForm, 1, 300).then(result => {
          this.permissionTable = result.data.permissions.records
          PageUtils.setPagination(this, "permission", result.data.permissions)
        }).catch(error => {
          console.log(error)
        })
      }
    },
    created () {
      this.listMenuTree()
    }
  }
</script>

<style scoped>

</style>